<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
      <aside-list
        v-for="(item, index) in list"
        :key="item.id"
        :active="activeId == item.id"
        @edit="handleEdit(item)"
        @delete="handleDelete(item)"
        @click="handleChangeActiveId(item.id)"
      >
        {{ item.name }}
      </aside-list>
    </div>
    <div class="bottom">
      <el-pagination
        background
        layout="prev, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
  </el-aside>

  <FormDrawer
    ref="formDrawerRef"
    @submit="handleSubmit"
    @cancel="handleCancel"
    :title="drawerTitle"
  >
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="default"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="排序">
        <el-input-number v-model="form.order" :min="0" :max="1000" />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue'
  import AsideList from './AsideList.vue'
  import FormDrawer from '@/components/FormDrawer.vue'
  import { toast } from '@/utils'
  import {
    getImageClassList,
    createImageClass,
    updateImageClass,
    deleteImageClass,
  } from '@/api/image_class.js'

  const emit = defineEmits(['change'])

  const loading = ref(false)
  const list = ref([])
  const activeId = ref(0)
  const limit = ref(10)
  const total = ref(0)
  const currentPage = ref(1)
  // 获取侧边栏数据
  function getData(p = null) {
    if (typeof p === 'number') {
      currentPage.value = p
    }
    loading.value = true
    getImageClassList(currentPage.value)
      .then((res) => {
        list.value = res.data.list
        total.value = res.data.totalCount
        let item = list.value[0]
        if (item) {
          handleChangeActiveId(item.id)
        }
      })
      .finally(() => (loading.value = false))
  }
  getData()

  // formDrawerRef
  const formRef = ref(null)
  const form = reactive({
    name: '',
    order: 50,
  })
  const rules = ref({
    name: [
      { required: true, message: '图库分类名称不能为空', trigger: 'blur' },
    ],
  })
  const formDrawerRef = ref(null)
  const editId = ref(0)
  const drawerTitle = computed(() =>
    editId.value ? '编辑图库分类' : '新增图库分类'
  )
  function handleSubmit() {
    formRef.value.validate((valid) => {
      if (!valid) {
        return
      } else {
        formDrawerRef.value.showLoading()
        const fun = editId.value
          ? updateImageClass(editId.value, form)
          : createImageClass(form)

        fun
          .then(() => {
            toast(drawerTitle.value + '成功')
            getData(editId.value ? currentPage.value : 1)
            handleCancel()
          })
          .finally(() => {
            formRef.value.resetFields()
            formDrawerRef.value.hideLoading()
          })
      }
    })
  }

  // 新增
  const handleCreate = () => {
    form.name = ''
    form.order = 50
    editId.value = 0
    formDrawerRef.value.open()
  }

  // 编辑
  function handleEdit(row) {
    form.name = row.name
    form.order = row.order
    editId.value = row.id
    formDrawerRef.value.open()
  }

  // 删除
  function handleDelete(row) {
    loading.value = true
    deleteImageClass(row.id)
      .then((res) => {
        toast('删除成功')
        getData(currentPage.value)
      })
      .finally(() => (loading.value = false))
  }

  // 取消
  const handleCancel = () => {
    formRef.value.resetFields()
    formDrawerRef.value.close()
  }

  const handleChangeActiveId = (id) => {
    activeId.value = id
    emit('change', id)
  }
  defineExpose({
    handleCreate,
  })
</script>

<style scoped>
  .image-aside {
    border-right: 1px solid #eee;
    position: relative;
  }
  .image-aside .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 3.125rem;
    overflow-y: auto;
  }
  .image-aside .bottom {
    position: absolute;
    height: 3.125rem;
    bottom: 0;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
  }
</style>
